<template>
	<view>
		<!-- 滑块视图 -->
		<view class="uni-margin-wrap">
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration">
				<swiper-item v-for="(item, index) in slidePicture">
					<image :src="item" mode="heightFix"></image>
				</swiper-item>
			</swiper>
		</view>

		<!-- 滚动公告 -->
		<view>
			<uni-notice-bar show-icon="true" scrollable="true" :text="headnotice" />
		</view>

		<!-- 功能图标列表 -->
		<view>
			<view style="height: 40rpx;"></view>
			<!-- <uni-section title="功能列表" type="line" padding> -->
			<uni-grid class="function" :column="4" :highlight="true" :showBorder="false" :square="false">
					<uni-grid-item  v-for="(item,index) in tabbarList">
						<view class="uni-grid-item">
						    <image class="image" :src="item.url" @click="jumpTo(index)"></image>
						    <text>{{item.text}}</text>
						</view>
					</uni-grid-item>
			</uni-grid> 
			<!-- </uni-section> -->
		</view>

		<!-- 公告栏 -->
		<view>
			<!-- <uni-section title="公告栏" type="line" padding> -->
			<view v-for="item in notice" class="notice">
				<uni-card :title="item.title" :extra="item.time" @click="enterNotice(item)">
					<text>{{item.text}}</text>
				</uni-card>
			</view>
			</uni-section>
		</view>


	</view>
</template>

<script>
	export default {
		props: {
			currentPagePath: String,
		},
		data() {
			return {
				textData: {},
				value: [],
				background: ["#FF4040", "#BF3EFF", "#98F5FF"],
				indicatorDots: true,
				autoplay: true,
				interval: 5000,
				duration: 500,
				headnotice: '系统全新升级 Version 1.0, 支持待办处理',
				tabbarList: [{
						url: "../../static/main/user/报修.png",
						text: "我要报修"
					},
					{
						url: "../../static/main/user/订单.png",
						text: "报修详情"
					},
					{
						url: "../../static/main/user/通知.png",
						text: "查看公告"
					},
					{
						url: "../../static/main/user/投诉建议.png",
						text: "联系我们"
					}
				],
				slidePicture: ["https://usc.sysu.edu.cn/taskcenter-v4/static/img/bn%20(4).c7eb786.png",
					"https://usc.sysu.edu.cn/taskcenter-v4/static/img/bn%20(2).36925cd.png",
					"https://usc.sysu.edu.cn/taskcenter-v4/static/img/bn%20(3).6e4feb1.png"
				],
				notice: [{
						title: '系统公告',
						time: '2022-10-6',
						text: '公告内容1'
					},
					{
						title: '系统公告',
						time: '2022-10-7',
						text: '公告内容2'
					}
				]
			}
		},
		onLoad() {
			uni.request({
				url: "",
				data: {},
				success: (res) => {
					console.log(res.data);
				}
			})
		},
		methods: {
			changeIndicatorDots(e) {
				this.indicatorDots = !this.indicatorDots
			},
			changeAutoplay(e) {
				this.autoplay = !this.autoplay
			},
			intervalChange(e) {
				this.interval = e.target.value
			},
			durationChange(e) {
				this.duration = e.target.value
			},
			getSwipers() {
				console.log("获取轮播图的数据")
				uni.request({
					url: '',
					success: function(res) {
						this.sslidePicture = res.data
					}
				})
			},
			jumpTo(index) {
				switch (index) {
					case 0:
						console.log("跳转到报修页面")
						uni.navigateTo({
							url: "publish"
						});
						break
					case 1:
						console.log("跳转到未读的报单页面")
						uni.navigateTo({
							url: "../order/order"
						});
						break
					case 2:
						console.log("跳转到公告页面")
						uni.navigateTo({
							url: "notice"
						});
						break
					case 3:
						console.log("跳转到其他页面")
						uni.navigateTo({
							url: "./other"
						});
						break
				}
			},
			jumpToNotice(e) {
				console.log("跳转到公告页面")
				uni.navigateTo({
					url: "./notice"
				});
			},
			enterNotice(notice) {
				console.log("跳转到公告详情")
				uni.navigateTo({
					url: "./notice_detail?notice=" + JSON.stringify(notice)
				});
			}
		}
	}
</script>

<style>
	.uni-margin-wrap {
		width: 100%;
		height: 450rpx;
	}

	.swiper {
		height: 450rpx;
		width: 100%;
	}

	.swiper-item {
		display: block;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
	}
    .function{
		display: flex;
		flex-direction: row;
		justify-content: center; //水平居中
	}
	.uni-grid-item {
		display: flex;
		flex-direction: column;
		background-color: white;
		align-items: center; //垂直居中
		
		justify-content: center; //水平居中
	}
	.image{
		width: 100rpx;
		height: 100rpx;
	}
	.notice {
		display: block;
		background-color: "#FFEFD5";
	}

	.uni-badge-left-margin {
		margin-left: 10px;
	}
</style>
